<template>
  <a-card title="基站详情" :bordered="false">
    <div class="container">
      <a-form-model
        :style="{}"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item ref="car" prop="car">
          <span slot="label"><img src="@/assets/car.png" alt="" class="img" /></span>
          <div class="carBox">
            <time-slot :statusList="statusList2" />
            <!-- <div class="statusContainer">
            <div class="statusBox" :key="index + 'status'" v-for="(item, index) in statusList">
              <span
                @click="handleInfo(item)"
                :class="item.status == 0 ? 'WPZ' : item.status == 1 ? 'WJL' : item.status == 2 ? 'JL' : 'DX'"
              >
              </span>
            </div>
          </div> -->
          </div>
        </a-form-model-item>
        <a-form-model-item ref="launchTime" label="上线时间" prop="launchTime">
          <a-input v-model="form.launchTime" :style="{ width: '400px' }" />
        </a-form-model-item>
        <a-form-model-item ref="name" label="时隙占用情况" prop="name">
          <div class="tableContainer">
            <div
              class="tableItem"
              :class="item.status == 1 ? 'empty' : item.status == 2 ? 'employ' : ''"
              :key="index + 'timeSolt'"
              v-for="(item, index) in statusList"
            ></div>
          </div>
        </a-form-model-item>
        <a-form-model-item ref="name" label="频道占用情况" prop="name">
          <div class="tableContainer">
            <div
              class="tableItem"
              :class="item.status == 1 ? 'empty' : item.status == 2 ? 'employ' : ''"
              :key="index + 'timeSolt'"
              v-for="(item, index) in statusList1"
            ></div>
          </div>
        </a-form-model-item>
        <!-- <a-form-model-item label="时隙占用情况" prop="region">
        <a-select v-model="form.region" placeholder="please select your zone">
          <a-select-option value="shanghai"> Zone one </a-select-option>
          <a-select-option value="beijing"> Zone two </a-select-option>
        </a-select>
      </a-form-model-item> -->

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="danger" @click="forcedReturn"> 强退 </a-button>
          <a-button style="margin-left: 10px" type="primary" @click="onDetail"> 详情 </a-button>
          <a-button style="margin-left: 10px" @click="config"> 配置 </a-button>
        </a-form-model-item>
      </a-form-model>
      <div class="keyBox">
        <div><span class="WPZ"></span>未配置</div>
        <div><span class="WJL"></span>未建链</div>
        <div><span class="JL"></span>建链</div>
        <div><span class="DX"></span>不存在</div>
      </div>
      <info-modal ref="infoModal" />
      <config-modal ref="configModal" />
      <!-- <detail-modal ref="detailModal" /> -->
    </div>
  </a-card>
</template>

<script>
import timeSlot from '@/components/timeSlot'
import infoModal from './modules/infoModal.vue'
import configModal from './modules/configModal.vue'
// import detailModal from './modules/detailModal.vue'
export default {
  components: {
    infoModal,
    configModal,
    // detailModal,
    timeSlot,
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        name: '子弹1 ',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        launchTime: '2023-1-12',
      },
      statusList1: [
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 1 },
        { status: 1 },
        { status: 1 },
      ],
      statusList: [
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 1 },
        { status: 1 },
      ],
      statusList2: [
        { status: 0 },
        { status: 2 },
        { status: 1 },
        { status: 2 },
        { status: 0 },
        { status: 3 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 0 },
        { status: 3 },
        { status: 0 },
        { status: 0 },
        { status: 3 },
        { status: 0 },
        { status: 1 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 3 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 1 },
        { status: 1 },
      ],

      rules: {
        // name: [
        //   { required: true, message: 'Please input Activity name', trigger: 'blur' },
        //   { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        // ],
        // region: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
        // date1: [{ required: true, message: 'Please pick a date', trigger: 'change' }],
        // type: [
        //   {
        //     type: 'array',
        //     required: true,
        //     message: 'Please select at least one activity type',
        //     trigger: 'change',
        //   },
        // ],
        // resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
        // desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
      },
    }
  },
  created() {
    console.log(132)
    let data = JSON.parse(this.$route.query.data)
    console.log(data)
    this.statusList2 = [...data]
  },
  destroyed() {
    this.statusList2 = []
  },
  methods: {
    forcedReturn() {},
    // handleInfo(row) {
    //   if (row.status == 1 || row.status == 2) this.$refs.detailModal.visible = true
    // },
    config() {
      console.log('配置')
      this.$refs.configModal.visible = true
    },
    onDetail() {
      console.log(this.$refs)
      this.$refs.infoModal.visible = true
      // this.$refs.ruleForm.validate((valid) => {
      //   if (valid) {
      //     alert('submit!')
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
  },
}
</script>

<style lang="less" scoped>
.img {
  width: 150px;
}
.carBox {
  display: flex;
}
.container {
  padding-left: 150px;
  display: flex;
  justify-content: flex-start;
}
.keyBox {
  width: 200px;
  line-height: 32px;
  height: auto;
  // border: 1px solid red;
  display: flex;
  flex-direction: column;
}
.tableContainer {
  width: 402px;
  display: flex;
  border: solid 0.1px;
  flex-wrap: wrap;
  .tableItem {
    width: 50px;
    height: 50px;
    border: solid 0.1px;
  }
}
.employ {
  background-size: 50px 50px;
  background-color: rgb(123, 243, 93);
  background-image: -webkit-linear-gradient(
    -45deg,
    rgba(133, 201, 56, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(139, 248, 96, 0.2) 50%,
    rgba(116, 115, 115, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgba(107, 106, 106, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(134, 132, 132, 0.2) 50%,
    rgba(117, 116, 116, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.empty {
  background-size: 50px 50px;
  background-color: rgb(68, 69, 70);
  background-image: -webkit-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(116, 115, 115, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgba(107, 106, 106, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(134, 132, 132, 0.2) 50%,
    rgba(117, 116, 116, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.statusContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.statusBox {
  width: 12.5%;
  text-align: center;
  span {
    cursor: pointer;
  }
}
.WPZ,
.WJL,
.JL,
.DX {
  display: inline-block;
  width: 25px;
  margin: auto;
  height: 25px;
  border-radius: 50%;
  margin-right: 5px;
}
.WPZ {
  background: red;
}
.WJL {
  background: rgb(230, 215, 19);
}
.JL {
  background: rgb(80, 226, 60);
}
.DX {
  background: rgb(119, 118, 118);
}
</style>
